<template>
  <zm-body>
    <!-- left -->
    <div class="app-lefter-bg" style="width:28rem"></div>
    <div class="monitors-lefter">
      <zm-box3>
        <!-- <el-input placeholder="搜索案件" v-model="input3" class="input-with-select">
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>-->
        <div class="filter-bar">
          <div class="filter-bar-left">
            <div class="filter-box-common">
              <div class="filter-box-common-header" @click="showFilterBody = !showFilterBody">
                按条件查询
                <i class="iconfont icon-down-arrow-line f12"></i>
              </div>
              <div class="filter-box-common-body" v-show="showFilterBody">
                <el-form ref="filterForm" size="mini" :model="filterForm" label-width="60px">
                  <el-form-item label="案件号">
                    <el-input placeholder="输入案件号搜索" v-model="filterForm.caseCode"></el-input>
                  </el-form-item>
                  <el-form-item label="区域">
                    <el-select
                      filterable
                      v-model="filterForm.region"
                      style="width:100%"
                      placeholder="请选择区域"
                    >
                      <el-option
                        :label="item.label"
                        :value="item.label"
                        v-for="item in regionList"
                        :key="item.id"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="监督员">
                    <el-input placeholder="请输入监督员姓名" v-model="filterForm.monitor"></el-input>
                  </el-form-item>
                  <el-form-item label="时间">
                    <el-col :span="12">
                      <el-date-picker
                        type="date"
                        placeholder="开始日期"
                        v-model="filterForm.startDate"
                        style="width: 100%;"
                      ></el-date-picker>
                    </el-col>
                    <el-col :span="12">
                      <el-date-picker
                        type="date"
                        placeholder="结束日期"
                        v-model="filterForm.endDate"
                        style="width: 100%;"
                      ></el-date-picker>
                    </el-col>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="filterHandler">查询</el-button>
                    <el-button @click="showFilterBody = false">取消</el-button>
                  </el-form-item>
                </el-form>
                <div class="filter-box-common-closer" v-if="false" @click="showFilterBody = false">
                  <i class="iconfont icon-close-line"></i>
                </div>
              </div>
            </div>
          </div>
          <div class="filter-bar-right">
            <el-switch
              v-model="listScroll"
              @change="listScrollStatusChange()"
              active-text="滚动"
              inactive-text="静止"
              active-color="#13ce66"
            ></el-switch>
          </div>
        </div>
        <ul class="panel-aside-nav">
          <li
            :class="{active:activeStatus.id===item.id}"
            v-for="(item,index) in statusList"
            :key="item.id"
            @click="statusItemClickHandler(item,index)"
          >
            <div class="num">{{item.value}}</div>
            <div class="label">{{item.label}}</div>
          </li>
        </ul>
        <div class="a-case-box" v-loading="pageDataLoading || caseListLoading">
          <div
            class="swiper-container caselist-swiper caselist-swiper2"
            @mouseenter="stop()"
            @mouseleave="start()"
          >
            <div class="swiper-wrapper a-case-list">
              <div
                class="a-case-item swiper-slide"
                v-for="(item,index) in caseListIndex"
                :key="index"
                @click="caseItemClickHandler(item,index)"
              >
                <div class="a-case-item__img">
                  <img :src="baseUrl.imgPath + item.img" />
                </div>
                <div class="a-case-item__main">
                  <a class="a-case-item__code pointer-outline" @click.stop="showAjInfo(item)">{{item.code}}</a>
                  <div class="a-case-item__title">{{item.title}}</div>
                  <div class="a-case-item__type">{{item.type}}</div>
                  <div class="a-case-item__createDate">{{item.createDate}}</div>
                </div>
                <div>
<!--                  <i class="a-case-item__sort-num">{{index+1}}</i>-->
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="a-case-footer mt10">
          <el-pagination
            background
            layout="prev, pager, next"
            small
            :page-size="caseListPageSize"
            :current-page="caseListPageIndex"
            :total="caseListTotal"
            @current-change="paginationChangeHandler"
          ></el-pagination>
        </div>
      </zm-box3>
    </div>
    <!-- end left -->
    <div
      id="mapBox"
      :class="{ready:mapReady}"
      class="main-body-mapbox"
      style="height:100vh;width:100vw"
    ></div>

    <case-base-info
      v-model="showCaseInfoDialog"
      :case-code="activeCaseObj.code"
      :case-id="activeCaseObj.id"
      :recid="activeCaseObj.id"
    ></case-base-info>

    <aj-info
      v-model="showInfo"
      :case-code="showAnjianInfo.code"
      :case-id="showAnjianInfo.id"
      :recid="showAnjianInfo.id"
    >
    </aj-info>
  </zm-body>
</template>

<script>
/*
   功能模块  案件分析
   创建人    zgf
   更新时间  2020/04/14
   备注
*/
var allDataArr = []
var searchAllDataArr = []
import elDragDialog from "@/directive/el-drag-dialog"; // base on element-ui
import CaseBaseInfo from "../public/caseBaseInfo";
import AjInfo from '../public/ajInfo'
export default {
  name: "AnalysisIndex",
  directives: { elDragDialog },
  components: { CaseBaseInfo,AjInfo },
  data() {
    return {
      filterForm: {
        caseCode: "",
        region: "",
        monitor: "",
        startDate: "",
        endDate: ""
      },
      showCaseInfoDialog: false,
      activeCaseObj: {},
      showAnjianInfo: {},
      regionList: [],
      showFilterBody: false,
      statusList: [],
      activeStatus: null,
      listScroll: true,
      caseListIndex: [],
      caseListTotal: 0, //总页数
      caseListPageSize: 10, //每页显示条数
      caseListPageIndex: 1, //接口开始页是不是从1？
      caseListLoading: false,
      pageDataLoading: false,
      mapReady: false,
      map: null,
      caseListSwiper: null,
      markersList: [],
      markersListRed: [],
      showInfo: false
    };
  },
  created(){
    this.pageDataLoading = true;
    let firsttime = new Date().getFullYear()+ "-" + ((new Date().getMonth()+1)<10?"0"+(new Date().getMonth()+1):(new Date().getMonth()+1)) + "-01 00:00:00"
    var day3 = new Date();
    day3.setTime(day3.getTime()+24*60*60*1000);
    let lasttime = day3.getFullYear()+ "-" + ((day3.getMonth()+1)<10?"0"+(day3.getMonth()+1):(day3.getMonth()+1)) + "-" + (day3.getDate()<10?"0"+(day3.getDate()):(day3.getDate())) + " 00:00:00"
    let ajzt='dcl',rwh='',sq='',humanname='';
    let pageNum=this.caseListPageIndex;
    let pageSize=this.caseListPageSize;
    debugger
    this.getData(pageNum,pageSize,ajzt, firsttime, lasttime, rwh, sq, humanname)
  },
  mounted() {
    window.vmComponent = this;
    this.$nextTick(() => {
      this.mapInit();
      // setTimeout(function () {
      //   this.swiperInit();
      // },1000)
    });
    this.getPagedata();
    // this.getCaseList();
  },
  watch: {
    showCaseInfoDialog(newValue){
      if(!newValue){
        this.map.remove(this.markersListRed);
      }
    }
  },
  methods: {
    filterHandler() {
      this.caseListPageIndex=1;
      this.actpageData(1);
    },
     actpageData(pageNum) {
      debugger
      let startDate = this.filterForm.startDate
      let endDate = this.filterForm.endDate
      if(startDate > endDate){
        this.$alert('开始时间需小于结束时间', '监督系统', {
          confirmButtonText: '确定'
        });
        return false
      }
      let firsttime, lasttime
      if(startDate){
        firsttime = startDate.getFullYear()+"-"+((startDate.getMonth()+1)<10?"0"+(startDate.getMonth()+1):(startDate.getMonth()+1))+"-"+(startDate.getDate()<10?"0"+startDate.getDate():startDate.getDate())
        if(endDate){
          lasttime = endDate.getFullYear()+"-"+((endDate.getMonth()+1)<10?"0"+(endDate.getMonth()+1):(endDate.getMonth()+1))+"-"+(endDate.getDate()<10?"0"+endDate.getDate():endDate.getDate())
        }else{
          this.$alert('请选择结束时间', '监督系统', {
            confirmButtonText: '确定'
          });
          return false
        }
      }
      if(endDate){
        lasttime = endDate.getFullYear()+"-"+((endDate.getMonth()+1)<10?"0"+(endDate.getMonth()+1):(endDate.getMonth()+1))+"-"+(endDate.getDate()<10?"0"+endDate.getDate():endDate.getDate())
        if(startDate){
          firsttime = startDate.getFullYear()+"-"+((startDate.getMonth()+1)<10?"0"+(startDate.getMonth()+1):(startDate.getMonth()+1))+"-"+(startDate.getDate()<10?"0"+startDate.getDate():startDate.getDate())
        }else{
          this.$alert('请选择开始时间', '监督系统', {
            confirmButtonText: '确定'
          });
          return false
        }
      }
     
      let pageSize=this.caseListPageSize
      let rwh = this.filterForm.caseCode
      let sq = this.filterForm.region
      let humanname = this.filterForm.monitor
      if(this.activeStatus.label == '待批转'){
        this.searchAjxx(pageNum,pageSize,"dcl", firsttime, lasttime, rwh, sq, humanname)
      }else if(this.activeStatus.label == '处置中'){
        this.searchAjxx(pageNum,pageSize,"czz", firsttime, lasttime, rwh, sq, humanname)
      }else if(this.activeStatus.label == '待结案'){
        this.searchAjxx(pageNum,pageSize,"dbj", firsttime, lasttime, rwh, sq, humanname)
      }else if(this.activeStatus.label == '结案'){
        this.searchAjxx(pageNum,pageSize,"ja", firsttime, lasttime, rwh, sq, humanname)
      }else if(this.activeStatus.label == '作废'){
        this.searchAjxx(pageNum,pageSize,"yzf", firsttime, lasttime, rwh, sq, humanname)
      }
    },
    swiperInit() {
      if (this.caseListSwiper) {
        this.caseListSwiper.destroy(true);
      }
      this.caseListSwiper = new Swiper(".caselist-swiper", {
        direction: "vertical", // 垂直切换选项
        loop: false, // 循环模式选项
        slidesPerView: 6,
        spaceBetween: 0,
        loopedSlides: 10,
        // 如果需要分页器
        pagination: {
          el: ".caselist-swiper .swiper-pagination"
        },
        mousewheel: true,
        autoplay: {
          delay: 2000,
          stopOnLastSlide: false,
          disableOnInteraction: false
        }
      });
    },
    //列表滚动/静止
    listScrollStatusChange() {
      if (this.listScroll) {
        this.caseListSwiper.autoplay.start();
      } else {
        this.caseListSwiper.autoplay.stop();
      }
    },
    stop(){
      this.caseListSwiper.autoplay.stop();
    },
    start(){
      if(!this.listScroll){
        return false;
      }
      this.caseListSwiper.autoplay.start();
    },
    mapInit() {
      const self = this;
      const AMap = window.AMap;
      setTimeout(() => {
        this.mapReady = true;
      }, 1000);
      self.map = new AMap.Map("mapBox", {
        mapStyle: "amap://styles/a5f6e6bd157193151290059146ec5e9b", // 设置地图的显示样式
        viewMode: "3D",
        turboMode: true,
        defaultCursor: "pointer",
        showBuildingBlock: true,
        expandZoomRange: true,
        zooms: [3, 20],
        zoom: 15,
        pitch: 40,
        center: [116.604808,40.127945],
        forceVector: true

      });
      let uUrl = this.baseUrl.WgUrl;
      var wms = new AMap.TileLayer.WMS({
        url: uUrl, // wms服务的url地址
        blend: false, // 地图级别切换时，不同级别的图片是否进行混合
        tileSize: 512, // 加载WMS图层服务时，图片的分片大小
        params: {
          styles:'default',
          'LAYERS': '0',
          VERSION:'1.3.0'
        } // OGC标准的WMS地图服务的GetMap接口的参数
      });
      wms.setMap(self.map);
    },
    //获取页面里一些杂碎数据
    getPagedata() {
      let curSelectedStatus = this.activeStatus;
      setTimeout(() => {
        this.statusList = [
          { id: 1, label: "待批转", value: 0 },
          { id: 2, label: "处置中", value: 0 },
          { id: 3, label: "待结案", value: 0 },
          { id: 4, label: "结案", value: 0 },
          { id: 5, label: "作废", value: 0 }
        ];
        this.regionList = [
          { id: "00001", label: "南卷村" },
          { id: "00002", label: "三家店村" },
          { id: "00003", label: "西杜兰村" },
          { id: "00004", label: "东杜兰村" },
          { id: "00005", label: "西海洪村" },
          { id: "00006", label: "东海洪村" },
          { id: "00007", label: "北法信村" },
          { id: "00008", label: "南法信村" },
          { id: "00009", label: "大江洼村" },
          { id: "00010", label: "焦各庄村" },
          { id: "00011", label: "刘家河村" }
        ];
        if (!this.activeStatus && this.statusList.length) {
          this.activeStatus = this.statusList[0];
        }
      }, 0);
    },
    //切换分页时
    paginationChangeHandler(pageIndex) {
      debugger
      // if(this.activeStatus.label == '待批转'){
      //   this.caseListIndex = allDataArr.dcl.slice((pageIndex-1)*this.caseListPageSize, pageIndex*this.caseListPageSize)
      // }else if(this.activeStatus.label == '处置中'){
      //   this.caseListIndex = allDataArr.czz.slice((pageIndex-1)*this.caseListPageSize, pageIndex*this.caseListPageSize)
      // }else if(this.activeStatus.label == '待办结'){
      //   this.caseListIndex = allDataArr.dbj.slice((pageIndex-1)*this.caseListPageSize, pageIndex*this.caseListPageSize)
      // }else if(this.activeStatus.label == '结案'){
      //   debugger
      //   if(allDataArr.ja.length>6){
      //     this.caseListIndex = allDataArr.ja.slice((pageIndex-1)*this.caseListPageSize, pageIndex*this.caseListPageSize)
      //   }else {
      //     this.caseListIndex = allDataArr.ja
      //   }

      // }else if(this.activeStatus.label == '作废'){
      //   this.caseListIndex = allDataArr.yzf.slice((pageIndex-1)*this.caseListPageSize, pageIndex*this.caseListPageSize)
      // }
      this.actpageData(pageIndex);
      this.caseListPageIndex = pageIndex;
      // this.getCaseList();
    },
    //获取列表数据
    getCaseList() {
      debugger
      // let params = {
      //   pageIndex: this.caseListPageIndex,
      //   pageSize: this.caseListPageSize,
      //   status: this.activeStatus
      // };
      // this.caseListLoading = false;
      this.$nextTick(() => {
          this.swiperInit();
          this.addPointsListToMap();
        //this.caseListSwiper.update()
      });

      // setTimeout(() => {
      //   this.caseListLoading = false;
      //   //接口获取到的总条数赋值
      //   //this.caseListTotal = 300;
      //   //给当前获取到页数据赋值
      //   // this.caseList = [
      //   //   {
      //   //     id: "0001",
      //   //     title: "市容环境，乱堆物堆料",
      //   //     img:
      //   //       "http://221.216.205.222:8081/eUrbanMIS/view/mediadl/media/getdata/Media2/rec/20200426/22409/d2b8ff39-2df2-4194-b7d0-bc88d89f3a36/egova_102176_297e60400eb9b70a46f61d0892a28f8e.jpg",
      //   //     code: "202004120003",
      //   //     type: "信息采集员上传",
      //   //     position: [108.529042, 40.272524],
      //   //     createDate: "2020/04/12 08:40:01"
      //   //   },
      //   //   {
      //   //     id: "0002",
      //   //     title: "市容环境乱晒衣服",
      //   //     img:
      //   //       "http://221.216.205.222:8081/eUrbanMIS/view/mediadl/media/getdata/Media2/rec/20200426/22409/d2b8ff39-2df2-4194-b7d0-bc88d89f3a36/egova_102176_297e60400eb9b70a46f61d0892a28f8e.jpg",
      //   //     code: "202004120003",
      //   //     type: "信息采集员上传",
      //   //     position: [122.547597, 41.369921],
      //   //     createDate: "2020/04/12 08:40:01"
      //   //   },
      //   //   {
      //   //     id: "0003",
      //   //     title: "市容环境，乱堆物堆料",
      //   //     img:
      //   //       "http://221.216.205.222:8081/eUrbanMIS/view/mediadl/media/getdata/Media2/rec/20200426/22409/d2b8ff39-2df2-4194-b7d0-bc88d89f3a36/egova_102176_297e60400eb9b70a46f61d0892a28f8e.jpg",
      //   //     code: "202004120003",
      //   //     type: "信息采集员上传",
      //   //     position: [116.922597, 38.127337],
      //   //     createDate: "2020/04/12 08:40:01"
      //   //   },
      //   //   {
      //   //     id: "0004",
      //   //     title: "市容环境，乱堆物堆料",
      //   //     img:
      //   //       "http://221.216.205.222:8081/eUrbanMIS/view/mediadl/media/getdata/Media2/rec/20200426/22409/d2b8ff39-2df2-4194-b7d0-bc88d89f3a36/egova_102176_297e60400eb9b70a46f61d0892a28f8e.jpg",
      //   //     code: "202004120003",
      //   //     position: [127.95287, 35.703385],
      //   //     createDate: "2020/04/12 08:40:01"
      //   //   },
      //   //   {
      //   //     id: "0005",
      //   //     title: "市容环境，乱堆物堆料",
      //   //     img:
      //   //       "http://221.216.205.222:8081/eUrbanMIS/view/mediadl/media/getdata/Media2/rec/20200426/22409/d2b8ff39-2df2-4194-b7d0-bc88d89f3a36/egova_102176_297e60400eb9b70a46f61d0892a28f8e.jpg",
      //   //     code: "202004120003",
      //   //     type: "信息采集员上传",
      //   //     position: [115.867909, 33.093057],
      //   //     createDate: "2020/04/12 08:40:01"
      //   //   },
      //   //   {
      //   //     id: "0006",
      //   //     title: "市容环境，乱堆物堆料",
      //   //     img:
      //   //       "http://221.216.205.222:8081/eUrbanMIS/view/mediadl/media/getdata/Media2/rec/20200426/22409/d2b8ff39-2df2-4194-b7d0-bc88d89f3a36/egova_102176_297e60400eb9b70a46f61d0892a28f8e.jpg",
      //   //     code: "202004120003",
      //   //     type: "信息采集员上传",
      //   //     position: [109.100331, 34.697948],
      //   //     createDate: "2020/04/12 08:40:01"
      //   //   },
      //   //   {
      //   //     id: "0007",
      //   //     title: "市容环境，乱堆物堆料",
      //   //     img:
      //   //       "http://221.216.205.222:8081/eUrbanMIS/view/mediadl/media/getdata/Media2/rec/20200426/22409/d2b8ff39-2df2-4194-b7d0-bc88d89f3a36/egova_102176_297e60400eb9b70a46f61d0892a28f8e.jpg",
      //   //     code: "202004120003",
      //   //     position: [117.230214, 43.126363],
      //   //     createDate: "2020/04/12 08:40:01"
      //   //   },
      //   //   {
      //   //     id: "0008",
      //   //     title: "市容环境，乱堆物堆料",
      //   //     img:
      //   //       "http://221.216.205.222:8081/eUrbanMIS/view/mediadl/media/getdata/Media2/rec/20200426/22409/d2b8ff39-2df2-4194-b7d0-bc88d89f3a36/egova_102176_297e60400eb9b70a46f61d0892a28f8e.jpg",
      //   //     code: "202004120003",
      //   //     type: "信息采集员上传",
      //   //     position: [111.649159, 38.058166],
      //   //     createDate: "2020/04/12 08:40:01"
      //   //   },
      //   //   {
      //   //     id: "0009",
      //   //     title: "市容环境，乱堆物堆料",
      //   //     img:
      //   //       "http://221.216.205.222:8081/eUrbanMIS/view/mediadl/media/getdata/Media2/rec/20200426/22409/d2b8ff39-2df2-4194-b7d0-bc88d89f3a36/egova_102176_297e60400eb9b70a46f61d0892a28f8e.jpg",
      //   //     code: "202004120003",
      //   //     type: "信息采集员上传",
      //   //     position: [108.485097, 35.810371],
      //   //     createDate: "2020/04/12 08:40:01"
      //   //   },
      //   //   {
      //   //     id: "0010",
      //   //     title: "市容环境，乱堆物堆料",
      //   //     img:
      //   //       "http://221.216.205.222:8081/eUrbanMIS/view/mediadl/media/getdata/Media2/rec/20200426/22409/d2b8ff39-2df2-4194-b7d0-bc88d89f3a36/egova_102176_297e60400eb9b70a46f61d0892a28f8e.jpg",
      //   //     code: "202004120003",
      //   //     type: "信息采集员上传",
      //   //     position: [123.646229, 41.960835],
      //   //     createDate: "2020/04/12 08:40:01"
      //   //   }
      //   // ];
      //   this.$nextTick(() => {
      //     this.caseListSwiper.update()
      //     this.swiperInit();
      //     this.addPointsListToMap();
      //   });
      // }, 1000);
    },
    //事件点击
    caseItemClickHandler(item, index) {
      // this.removeMapMarkers();
      this.addMarkerToMapRedPosition(item, index);
      this.activeCaseObj = item;
      this.showCaseInfoDialog = true;
      this.map.panTo(item.position);
    },
    //点击事件显示详情，带办理过程
    showAjInfo(item){
      this.showAnjianInfo = item;
      this.showInfo = true
    },
    //地图上的事件点点击
    mapCasePointClick(objStr, index) {
      let item = JSON.parse(decodeURIComponent(objStr));
      this.activeCaseObj = item;
      this.showCaseInfoDialog = true;
      this.map.panTo(item.position);
    },
    //批量添加点
    addPointsListToMap() {
      this.removeMapMarkers();
      for (var i in this.caseListIndex) {
        let item = this.caseListIndex[i];
        this.addMarkerToMap(item, i);
      }
    },
    removeMapMarkers() {
      this.map.remove(this.markersList);
    },
    //在地图上添加标注点
    addMarkerToMap(obj, index) {
      const self = this;
      const AMap = window.AMap;
      const objStr = encodeURIComponent(JSON.stringify(obj));
      // 点标记显示内容，HTML要素字符串
      var markerContent = `<div class="map-icon-marker" style="width:${5 + 5}em">
          <div class="map-icon-marker__icon"><i class="marker-index">${+index + 1}</i> </div>
          <div class="map-icon-marker__label">
           ${obj.title}
          </div>
      </div>`;
      let  iconUrl = "images/AjPosition_"+index+".png"
      var position = new AMap.LngLat(obj.position[0], obj.position[1]);
      var marker = new AMap.Marker({
        position: position,
        // 将 html 传给 content
        // content: markerContent,
        // 以 icon 的 [center bottom] 为原点
        icon: iconUrl,
        title: obj.title,
        offset: new AMap.Pixel(0, 0)
      });
      this.markersList.push(marker);
      // 将 markers 添加到地图
      self.map.add(marker);
      AMap.event.addListener(marker, 'click', function(e) {
        debugger
      })
    },
    //在地图上添加标注点
    addMarkerToMapRedPosition(obj, index) {
      const self = this;
      self.map.remove(this.markersListRed);
      const AMap = window.AMap;
      const objStr = encodeURIComponent(JSON.stringify(obj));
      let  iconUrl = "images/AjPosition_red.png"
      var position = new AMap.LngLat(obj.position[0], obj.position[1]);
      var markerRed = new AMap.Marker({
        position: position,
        // 将 html 传给 content
        // content: markerContent,
        // 以 icon 的 [center bottom] 为原点
        icon: iconUrl,
        title: obj.title,
        offset: new AMap.Pixel(0, 0)
      });
      this.markersListRed.push(markerRed);
      // 将 markers 添加到地图
      self.map.add(markerRed);
      AMap.event.addListener(markerRed, 'click', function(e) {
        debugger
      })
    },
    //按照状态筛选
    statusItemClickHandler(item, index) {
      debugger
      this.activeStatus = item;
      let caseListPageSize = this.caseListPageSize
      this.map.remove(this.markersListRed)
      this.filterHandler();
      // switch (item.id) {
      //   case 1:
      //     debugger

      //     this.map.remove(this.markersListRed)
      //     this.caseListTotal = allDataArr.dcl.length
      //     if(allDataArr.dcl.length>10){
      //       this.caseListIndex = allDataArr.dcl.slice(0, caseListPageSize)
      //     }else{
      //       this.caseListIndex = allDataArr.dcl
      //     }

      //     break;
      //   case 2:
      //     debugger
      //     this.map.remove(this.markersListRed)
      //     // this.caseListTotal = allDataArr.czz.length
      //     // this.caseListIndex = allDataArr.czz.slice(0, this.caseListPageSize)
      //     this.filterHandler();
      //     break;
      //   case 3:
      //     debugger
      //     this.map.remove(this.markersListRed)
      //     this.caseListTotal = allDataArr.dbj.length
      //     this.caseListIndex = allDataArr.dbj.slice(0, this.caseListPageSize)
      //     break;
      //   case 4:
      //     debugger
      //     this.map.remove(this.markersListRed)
      //     this.caseListTotal = allDataArr.ja.length
      //     if(this.caseListTotal <= 6){
      //       this.caseListIndex = allDataArr.ja
      //     }else {
      //       this.caseListIndex = allDataArr.ja.slice(0, this.caseListPageSize)
      //     }
      //     break;
      //   case 5:
      //     debugger
      //     this.map.remove(this.markersListRed)
      //     this.caseListTotal = allDataArr.yzf.length
      //     this.caseListIndex = allDataArr.yzf.slice(0, this.caseListPageSize)
      //     break;
      //   default:
      //     break;
      // }
      this.getCaseList();
    },
    searchAjxx(pageNum,pageSize,ajzt, firsttime, lasttime, rwh, sq, humanname){
      debugger
      // this.activeStatus.id =1
      allDataArr = []
      this.caseListIndex = []
      let caseListPageSize = this.caseListPageSize
      if(firsttime==null){
        firsttime = new Date().getFullYear()+ "-" + ((new Date().getMonth()+1)<10?"0"+(new Date().getMonth()+1):(new Date().getMonth()+1)) + "-01 00:00:00"
      }
      if(lasttime==null){
        var day3 = new Date();
        day3.setTime(day3.getTime()+24*60*60*1000);
        lasttime = day3.getFullYear()+ "-" + ((day3.getMonth()+1)<10?"0"+(day3.getMonth()+1):(day3.getMonth()+1)) + "-" + (day3.getDate()<10?"0"+(day3.getDate()):(day3.getDate())) + " 00:00:00"
      }
      this.pageDataLoading = true;
      this.getData(pageNum,pageSize,ajzt, firsttime, lasttime, rwh, sq, humanname)
      // this.$http.get(this.baseUrl.searchAllUrl, {
      //   params: {
      //     ajzt: ajzt,
      //     firsttime: firsttime,
      //     lasttime: lasttime,
      //     rwh: rwh,
      //     sq: sq,
      //     humanname: humanname
      //   }
      // }).then((rel)=>{
      //   debugger
      //   allDataArr = rel.data
      //   this.caseList = rel.data.tjcx.slice(0, caseListPageSize)
      //   // this.caseListTotal =  this.caseList.length / this.caseListPageSize;
      //   this.caseListTotal = allDataArr.tjcx.length
      //   this.pageDataLoading = false;
      //   this.getCaseList()
      // }).catch((e)=>{
      //   console.log(e)
      // })
    },
    getData(pageNum,pageSize,ajzt, firsttime, lasttime, rwh, sq, humanname){
      debugger
      allDataArr = []
      this.caseListIndex = []
      this.$http.get(this.baseUrl.searchAllUrl, {
        params: {
          pageNum:pageNum,
          pageSize:pageSize,
          ajzt: ajzt,
          firsttime: firsttime,
          lasttime: lasttime,
          rwh: rwh,
          sq: sq,
          humanname: humanname
        }
      }).then((rel)=>{
        let caseListPageSize = this.caseListPageSize
        debugger
        allDataArr = rel.data.list.list
        if(rel.data.ajxxtj!=null){
          this.statusList = [
          { id: 1, label: "待批转", value: rel.data.ajxxtj.DCL },
          { id: 2, label: "处置中", value: rel.data.ajxxtj.CZZ },
          { id: 3, label: "待结案", value: rel.data.ajxxtj.DBJ },
          { id: 4, label: "结案", value: rel.data.ajxxtj.JA },
          { id: 5, label: "作废", value: rel.data.ajxxtj.YZF }
        ];
        }
        
        // if(rel.data.dcl.length>10){
        //   this.caseListIndex = rel.data.dcl.slice(0, caseListPageSize)
        // }else {
        //   this.caseListIndex = rel.data.dcl
        // }
        this.caseListIndex = allDataArr;
        // this.caseListTotal =  this.caseList.length / this.caseListPageSize;
        // this.caseListTotal = allDataArr.dcl.length
        this.caseListTotal =rel.data.list.totalSize
        this.pageDataLoading = false;
        this.getCaseList()
      }).catch((e)=>{
        console.log(e)
      })
    }
  }
};
</script>

<style lang="less" scoped>
@import "../../css/mixin.less";
.fadeInUpA();
.fadeInDownA();
.a-case-box{
  height: calc(100vh - 16rem);
  .swiper-container{
    height: 100%;
  }
}
.monitors-lefter {
  position: absolute;
  left: 0.5rem;
  top: 0.5rem;
  z-index: 5;
  width: 24rem;
  .zm-box3 {
    height: calc(100vh - 6rem);
    .el-tree {
      height: calc(100vh - 12.5rem);
      overflow-y: auto;
      &::-webkit-scrollbar {
        /*滚动条整体样式*/
        width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
        height: 4px;
        scrollbar-arrow-color: #191553;
      }
      ::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 5px;
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: rgba(0, 0, 0, 0.2);
        scrollbar-arrow-color: #191553;
      }
      ::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        border-radius: 0;
        background: rgba(0, 0, 0, 0.1);
      }
    }
  }
}
.monitors-list {
  width: 100%;
  .monitors-item {
    display: flex;
    align-items: center;
    &:hover {
      opacity: 0.7;
    }
    &-avatar {
      width: 2.25rem;
      height: 2.25rem;
      margin-right: 0.5rem;
      img {
        width: 100%;
        border-radius: 2.25rem;
      }
    }
    &-main {
      flex: 1;
      width: 0;
    }
    &-aside {
      display: flex;
      font-size: 0.7rem;
      justify-content: center;
      i {
        font-size: 0.7rem;
        vertical-align: middle;
      }
    }
    &-name {
      font-size: 0.8rem;
      font-weight: bold;
      color: #fff;
    }
    &-type {
      font-size: 0.6rem;
      margin-left: 0.3rem;
      font-weight: normal;
      color: #8765ff;
    }
    &-phone {
      font-size: 0.7rem;
    }
    &-status {
      background-color: #3bac74;
      height: 1rem;
      width: 2.2rem;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 0.2rem;
      margin-right: 0.2rem;
    }
  }
}

.panel-aside-nav {
  position: absolute;
  left: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
  top: 3rem;
  margin-left: -0.3rem;
  li {
    width: 3.5rem;
    height: 3rem;
    margin-top: 0.6rem;
    background-color: #0e0e5a;
    font-size: 0.75rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border: solid 1px #0281ff;
    border-left: none;
    transition: all 0.3s;
    cursor: pointer;
    flex-direction: column;
    .num {
      font-size: 0.95rem;
    }
    .label {
      font-size: 0.75rem;
    }
    &.active {
      background-color: #0281ff;
      border-color: #0281ff;
      color: #0b0a2c;
      font-weight: bold;
    }
    &:hover {
      opacity: 0.7;
    }
  }
}
.a-case-box {
  .a-case-list {
    margin: 0;
    padding: 0;
    list-style: none;
    padding-top: 0.5rem;
    .a-case-item {
      display: flex;
      padding: 0.5rem;
      line-height: 1.4em;
      align-items: center;
      align-content: flex-start;
      height: 5rem;
      border-bottom: dotted 1px #3d3db6;
      box-sizing: border-box;
      cursor: pointer;
      &:hover {
        background-color: #130a6b;
      }
      &__img {
        width: 5rem;
        height: 4rem;
        margin-right: 0.75rem;
        img {
          width: 100%;
          height: 4rem;
          object-fit: cover;
          border-radius: 0.2rem;
        }
      }
      &__main {
        flex: 1;
        margin-right: 0.75rem;
      }
      &__code {
        font-size: 0.6rem;
        color: #fff;
      }
      &__title {
        font-size: 0.8rem;
        counter-reset: #fff;
        font-weight: bold;
      }
      &__type {
        font-size: 0.65rem;
        color: #f7b500;
      }
      &__createDate {
        font-size: 0.6rem;
        color: #b2bcff;
        opacity: 0.5;
      }
      &__sort-num {
        width: 1.5rem;
        height: 1.5rem;
        background-color: #f3b200;
        color: midnightblue;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 5rem;
        font-weight: bold;
      }
    }
  }
}
.a-case-footer {
  height: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.filter-bar {
  display: flex;
  justify-content: space-between;
  padding: 0 0.5rem;
  height: 2.5rem;
  align-items: center;
  &-left {
    flex: 1;
  }
}
  /*.a-case-list{*/
  /*  display: flex;*/
  /*  flex-wrap: wrap;*/
  /*}*/
</style>
